<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基本使用</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<h2 class="page-header">Promise 初体验</h2>
		<button class="btn btn-primary" id="btn">点击抽奖</button>
	</div>
	<script>
		// 生成随机数
		function rand(m,n){
			return Math.ceil(Math.random() * (n-m+1)) + m-1
		}
		/**
		 * 点击按钮，2s 后显示是否中奖（30%概率中奖）
		 * 		若中奖弹出		恭喜恭喜，奖品为10万 RMB 劳斯莱斯优惠券
		 * 		若未中奖弹出	再接再厉
		*/
		//获取元素对象
		const btn = document.querySelector('#btn')
		//绑定单机事件
		btn.addEventListener('click',function(){
			//定时器
			//setTimeout(()=>{
			//	// 30% 1-100 1 2 30
			//	// 获取从1 - 100的一个随机数
			//	let n = rand(1,100)
			//	// 判断
			//	if(n <= 30){
			//		alert('恭喜恭喜，奖品为10万 RMB 劳斯莱斯优惠券')
			//	}else{
			//		alert('再接再厉')
			//	}
			//},1000)

			// Promise 形式实现
			// resolve 解决 函数类型的数据
			// reject  拒绝 函数类型的数据
			const p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					// 30% 1-100 1 2 30
					// 获取从1 - 100的一个随机数
					let n = rand(1,100)
					// 判断
					if(n <= 30){
						resolve(n) // 将 promise 对象的状态设置为 【成功】
					}else{
						reject(n) // 将 promise 对象状态设置为 【失败】
					}
				},1000)
			})

			// 调用 then 方法
			// value 值
			// reason 理由
			p.then((value)=>{
				alert('恭喜恭喜，奖品为10万 RMB 劳斯莱斯优惠券，你的中奖数字为 '+value)
			},(reason)=>{
				alert('再接再厉，你的号码为 '+reason)
			})
		})
	</script>
</body>
</html>